<template>
  <!--  <page-layout :title="description">-->
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="公司名称">
              <!--              <a-input placeholder="请输入公司名称" v-model="queryParam.companyName"></a-input>-->
              <a-select v-model="queryParam.companyName" allowClear showSearch
                        placeholder="公司名称">
                <a-select-option v-for="(item, key) in companyData" :key="key" :value="item.value">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="箱东代码">
              <j-dict-select-tag v-model="queryParam.containerCode" placeholder="箱东代码"
                                 dictCode="soc" />
              <!--              <a-input placeholder="请输入箱东代码" v-model="queryParam.containerCode"></a-input>-->
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="箱型">
              <j-dict-select-tag v-model="queryParam.containerType" placeholder="箱型"
                                 dictCode="box_type" />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="箱号">
              <a-input placeholder="请输入箱号" v-model="queryParam.containerNumber"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="起运港">
              <a-auto-complete allowClear v-model="queryParam.polDesc" placeholder="起运港"
                               :dataSource="portData" @search="portHandleSearch" />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="目的港">
              <a-auto-complete allowClear v-model="queryParam.podDesc" placeholder="起运港"
                               :dataSource="portData" @search="portHandleSearch" />
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="堆场">
              <a-select v-model="queryParam.podYardInfo"
                        placeholder="请选择堆场" allowClear showSearch :filter-option="filterOption">
                <a-select-option v-for="(item, key) in yardInfoOptions" :key="key" :value="item.value">
                  {{ item.text }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
                  <span style="overflow: hidden;" class="table-page-search-submitButtons">
                    <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
                    <!--                    <a-button @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>-->
                    <j-super-query :fieldList="fieldList" ref="superQueryModal"
                                   @handleSuperQuery="handleSuperQuery" style="margin-left: 8px"></j-super-query>
                  </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->

    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-dropdown :trigger="['click']">
        <a-menu slot="overlay" @click="handleMenuClick">
          <a-menu-item key="1">
            <a-icon type="global" />
            国际箱贸业务
          </a-menu-item>
          <a-menu-item key="2">
            <a-icon type="inbox" />
            国内箱贸业务
          </a-menu-item>
          <a-menu-item key="3">
            <a-icon type="to-top" />
            租箱业务
          </a-menu-item>
        </a-menu>
        <a-button type="primary">
          <a-icon type="plus" />
          新增箱贸业务
        </a-button>
      </a-dropdown>
      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
                @change="handleImportExcel">
        <a-button type="primary" icon="import" ghost>导入</a-button>
      </a-upload>
      <a-button type="primary" icon="download" ghost @click="handleExportXls('集装箱贸易')">导出</a-button>
      <!--      <a-button @click="handleAdd" type="primary" icon="plus">新增业务</a-button>-->
      <!--      <a-button type="primary" icon="download" ghost @click="handleExportXls('集装箱贸易表')">导出</a-button>-->
      <a-dropdown v-if="selectedRowKeys.length > 0">
        <a-menu slot="overlay">
          <a-menu-item key="1" @click="batchDel">
            <a-icon type="delete" />
            删除
          </a-menu-item>
        </a-menu>
        <a-button style="margin-left: 8px"> 批量操作
          <a-icon type="down" />
        </a-button>
      </a-dropdown>
    </div>
    <!-- table区域-begin -->
    <div>
      <!--      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">-->
      <!--        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a style="font-weight: 600">{{ selectedRowKeys.length }}</a>项-->
      <!--        <a style="margin-left: 24px" @click="onClearSelected">清空</a>-->
      <!--      </div>-->
      <div class="ant-alert ant-alert-info" style="margin-bottom: 16px;">
        <i class="anticon anticon-info-circle ant-alert-icon"></i> 已选择 <a
        style="font-weight: 600">{{ selectedRowKeys.length }}</a>项
        <a style="margin-left: 24px" @click="onClearSelected">清空</a>
        <a-popover title="自定义列" trigger="click" placement="leftBottom" style="float: right">
          <template slot="content">
            <a-checkbox-group @change="onColSettingsChange" v-model="settingColumns" :defaultValue="settingColumns">
              <a-row>
                <template v-for="(item,index) in defColumns">
                  <template v-if="item.key!='rowIndex'&& item.dataIndex!='action'">
                    <a-col :span="12">
                      <a-checkbox :value="item.dataIndex">{{ item.title }}</a-checkbox>
                    </a-col>
                  </template>
                </template>
              </a-row>
            </a-checkbox-group>
          </template>
          <a>
            <a-icon type="setting" />
            自定义列</a>
        </a-popover>
        <a style="margin-right:20px;float: right" @click="showHiddenActionCol">{{ actionLabel }}</a>
        <span style="margin-right:20px;float: right">
          <a-select size="small" defaultValue="5000" style="width:120px" @change="refreshData">
           <a-select-option value="5000">每5秒刷新</a-select-option>
           <a-select-option value="30000">每30秒刷新</a-select-option>
           <a-select-option value="60000">每1分钟刷新</a-select-option>
          </a-select>
        </span>
      </div>
      <a-table
        ref="table"
        size="small"
        bordered
        rowKey="id"
        class="j-table-force-nowrap"
        :scroll="{x:1500,y:tableHeight}"
        :style="{'min-height':tableHeight+'px'}"
        :components="components"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        @change="handleTableChange"
        :customRow="handleShowEdit">
        <template #footer>{{ Footer }}</template>
        <span slot="eta" slot-scope="text,record">
          <template v-if="text">
            <template
              v-if="!record.podReturnboxTime && !record.podDeliveryTime && getNowFormatDate(!text ? '' : (text.length > 10 ? text.substr(0, 10) : text))>=2">
               <a-badge dot title="请及时填写目的港提货时间" :offset="[5,0]" @click="showBadgeModal('请及时填写目的港提货时间')">
                 {{ !text ? '' : (text.length > 10 ? text.substr(0, 10) : text) }}
               </a-badge>
            </template>
            <template v-else>
              {{ !text ? '' : (text.length > 10 ? text.substr(0, 10) : text) }}
            </template>
          </template>
          <template v-else>
              {{ !text ? '' : (text.length > 10 ? text.substr(0, 10) : text) }}
          </template>
        </span>
        <!-- 根据提货时间判断还箱时间 -->
        <span slot="tihuo" slot-scope="text,record">
          <template v-if="text">
            <template
              v-if="!record.podReturnboxTime && getNowFormatDate(!text ? '' : (text.length > 10 ? text.substr(0, 10) : text))>=record.tipsDay">
              {{ calcTips(record.id, !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)) }}
               <a-badge dot title="请及时填写目的港还空箱时间" :offset="[5,0]" @click="showBadgeModal('请及时填写目的港还空箱时间')">
                 {{ !text ? '' : (text.length > 10 ? text.substr(0, 10) : text) }}
               </a-badge>
            </template>
            <template v-else>
              {{ !text ? '' : (text.length > 10 ? text.substr(0, 10) : text) }}
            </template>
          </template>
          <template v-else>
              {{ !text ? '' : (text.length > 10 ? text.substr(0, 10) : text) }}
          </template>
        </span>
        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)"><a-icon type="form"></a-icon>编辑</a>

          <!--          <a-divider type="vertical" />-->

          <!--          <a-popconfirm title="是否复制该条数据为新的一条?" @confirm="() => copy(record)">-->
          <!--               <a href="#"><a-icon type="copy"></a-icon>复制</a>-->
          <!--          </a-popconfirm>-->

          <a-divider type="vertical" />
              <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
                            <a> <a-icon type="delete"></a-icon> 删除</a>
              </a-popconfirm>
        </span>

      </a-table>
    </div>

    <!--    <jzx-trade-modal ref="modalForm" :type="tradeType" @ok="modalFormOk" @close="allclose" />-->
    <!--    <a-drawer-->
    <!--      :title="returnModalTitle"-->
    <!--      :width="600"-->
    <!--      placement="right"-->
    <!--      :destroy-on-close="true"-->
    <!--      :mask-closable="false"-->
    <!--      :closable="true"-->
    <!--      :visible="returnModalVisible"-->
    <!--      :keyboard="false"-->
    <!--      @close="returnModalAddHandleCancel"-->
    <!--    >-->
    <!--      <ReturnBoxForm :dataSource="returnBoxData" ref="returnBoxForm" @cb="returnBoxCallback">-->

    <!--      </ReturnBoxForm>-->
    <!--      <div-->
    <!--        :style="{-->
    <!--          position: 'absolute',-->
    <!--          right: 0,-->
    <!--          bottom: 0,-->
    <!--          width: '100%',-->
    <!--          borderTop: '1px solid #e9e9e9',-->
    <!--          padding: '10px 16px',-->
    <!--          background: '#fff',-->
    <!--          textAlign: 'right',-->
    <!--          zIndex: 999,-->
    <!--        }"-->
    <!--      >-->

    <!--        <a-button :style="{ marginRight: '8px' }" @click="returnModalAddHandleCancel">-->
    <!--          关闭-->
    <!--        </a-button>-->
    <!--        <a-button type="primary" @click="returnModalAddHandleOk">-->
    <!--          保存-->
    <!--        </a-button>-->
    <!--      </div>-->
    <!--    </a-drawer>-->
    <!--    <a-modal-->
    <!--      :title="returnModalTitle"-->
    <!--      :visible="returnModalVisible"-->
    <!--      :width="600"-->
    <!--      :confirm-loading='returnConfirmLoading'-->
    <!--      :maskClosable="false"-->
    <!--      @ok="returnModalAddHandleOk"-->
    <!--      @cancel="returnModalAddHandleCancel">-->
    <!--      <ReturnBoxForm>-->

    <!--      </ReturnBoxForm>-->

    <!--    </a-modal>-->
  </a-card>
  <!--  </page-layout>-->
</template>

<script>

import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import JDictSelectTag from '@/components/dict/JDictSelectTag.vue'
import '@/assets/less/TableExpand.less'
import { getAction, httpAction } from '@api/manage'
import ReturnBoxForm from '@views/jzxtrade/modules/ReturnBoxForm'
import JSuperQuery from '@/components/jeecg/JSuperQuery.vue'
import { ajaxGetDictItems } from '@api/api'
import Vue from 'vue'
import PageLayout from '@/components/page/PageLayout'
import { Modal } from 'ant-design-vue'
import JzxTradeModalWindow from '@views/jzxtrade/modules/JzxTradeModalWindow'

const superQueryFieldList = [{
  type: 'select',
  value: 'containerCode',
  text: '箱东代码',
  dictCode: 'soc'
}, {
  type: 'string',
  value: 'containerNumber',
  text: '箱号'
}, {
  type: 'select',
  value: 'containerType',
  text: '箱型',
  dictCode: 'box_type'
}, {
  type: 'select',
  value: 'conditionType',
  text: '新箱/旧箱',
  dictCode: 'box_condition'
}, {
  type: 'string',
  value: 'customerBusinessNumber',
  text: '客户业务编号'
}, {
  type: 'string',
  value: 'createBy',
  text: '操作员'
}, {
  type: 'select',
  value: 'shipCompany',
  text: '船公司',
  dictCode: 'ship_company'
}, {
  type: 'date',
  value: 'polInTime',
  text: '起运港进堆场时间'
}, {
  type: 'date',
  value: 'podDeliveryTime',
  text: '目的港提货时间'
}, {
  type: 'number',
  value: 'podStackingDays',
  text: '目的港堆存天数'
}, {
  type: 'date',
  value: 'eta',
  text: 'ETA'
}, {
  type: 'date',
  value: 'etd',
  text: 'ETD'
}, {
  type: 'date',
  value: 'podReturnboxTime',
  text: '目的港还空箱时间'
}, {
  type: 'date',
  value: 'podLeaveTime',
  text: '目的港离场时间'
}
//   {
//   type: 'select',
//   value: 'status',
//   text: '订单状态',
//   options: [
//     { label: '新订单', value: 1 },
//     { label: '操作中', value: 2 },
//     { label: '操作完成', value: 3 }
//   ]
// },
//   {
//     type: 'select',
//     value: 'type',
//     text: '业务状态',
//     options: [
//       { label: '国际箱贸业务', value: 1 },
//       { label: '国内箱贸业务', value: 2 },
//       { label: '租箱业务', value: 3 }
//     ]
//   }
]
export default {
  name: 'JzxTradeList',
  mixins: [JeecgListMixin],
  components: {
    JDictSelectTag,
    ReturnBoxForm,
    JSuperQuery,
    PageLayout
  },
  data() {
    this.components = {
      header: {
        cell: (h, props, children) => {
          const { key, ...restProps } = props
          const col = this.columns.find(col => {
            const k = col.dataIndex || col.key
            return k === key
          })

          if (!col || !col.width) {
            return h('th', { ...restProps }, [...children])
          }

          const dragProps = {
            key: col.dataIndex || col.key,
            class: 'table-draggable-handle',
            attrs: {
              w: 10,
              x: col.width,
              z: 1,
              axis: 'x',
              draggable: true,
              resizable: false
            },
            on: {
              dragging: (x, y) => {
                col.width = Math.max(x, 1)
              }
            }
          }
          const drag = h('vue-draggable-resizable', { ...dragProps })
          return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
        }
      }
    }

    return {
      actionLabel: '隐藏操作列',
      actionColumn: {
        title: '操作',
        dataIndex: 'action',
        align: 'center',
        fixed: 'right',
        width: 200,
        scopedSlots: { customRender: 'action' }
      },
      Footer: '',
      yardInfoOptions: [],
      portData: [],
      tradeType: '1',//箱贸类型
      fieldList: superQueryFieldList,
      superQueryFlag: false,
      superQueryParams: '',
      returnBoxData: {},
      returnModalTitle: '开始还箱',
      returnModalVisible: false,
      returnConfirmLoading: false,
      description: '集装箱贸易管理',
      settingColumns: [],
      columns: [],
      // 表头
      defColumns: [
        {
          title: '业务类型',
          align: 'center',
          width: 130,
          fixed: 'left',
          dataIndex: 'type',
          customRender: function(text) {
            if (text == '1') {
              return '国际箱贸业务'
            } else if (text == '2') {
              return '国内箱贸业务'
            } else if (text == '3') {
              return '租箱业务'
            }
          },
          ellipsis: true
        },
        // {
        //   title: '状态',
        //   align: 'center',
        //   width: 130,
        //   fixed: 'left',
        //   dataIndex: 'status',
        //   customRender: function(text) {
        //     if (text == '1') {
        //       return <a-tag color="#108ee9" style="width:100px">
        //         新订单
        //       </a-tag>
        //     } else if (text == '2') {
        //       return <a-tag color="#006600" style="width:100px">
        //         操作中
        //       </a-tag>
        //     } else if (text == '3') {
        //       return <a-tag color="#66CC99" style="width:100px">
        //         操作完成
        //       </a-tag>
        //     }
        //     // return !text?"":(text.length>10?text.substr(0,10):text)
        //   }
        // },
        {
          title: '箱东代码',
          align: 'center',
          width: 120,
          dataIndex: 'containerCode',
          fixed: 'left',
          ellipsis: true
        },
        {
          title: '箱号',
          align: 'left',
          width: 160,
          dataIndex: 'containerNumber',
          fixed: 'left',
          ellipsis: true
        },
        {
          title: '箱型',
          align: 'center',
          width: 160,
          dataIndex: 'containerType',
          ellipsis: true
        },
        {
          title: '新箱/旧箱',
          align: 'center',
          width: 160,
          dataIndex: 'conditionType_dictText',
          ellipsis: true
        },
        {
          title: '公司名称',
          align: 'left',
          width: 200,
          // fixed: 'left',
          dataIndex: 'companyName',
          ellipsis: true
        },
        {
          title: '客户业务编号',
          align: 'left',
          width: 200,
          dataIndex: 'customerBusinessNumber',
          ellipsis: true
        },
        {
          title: '操作员',
          align: 'center',
          width: 100,
          dataIndex: 'createBy',
          ellipsis: true
        },
        {
          title: '起运港',
          align: 'center',
          width: 200,
          dataIndex: 'polDesc',
          ellipsis: true,
          customRender: function(text, r) {
            return text ? text : r.pol
          }
        },
        {
          title: '目的港',
          align: 'center',
          width: 200,
          dataIndex: 'podDesc',
          ellipsis: true,
          customRender: function(text, r) {
            return text ? text : r.pod
          }
        },
        {
          title: '起运港进堆场时间',
          align: 'center',
          width: 230,
          dataIndex: 'polInTime',
          customRender: function(text) {
            return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
          },
          ellipsis: true
        },
        {
          title: '船公司',
          align: 'left',
          width: 200,
          dataIndex: 'shipCompany',
          ellipsis: true
        },
        {
          title: 'ETD',
          align: 'center',
          width: 230,
          dataIndex: 'etd',
          customRender: function(text) {
            return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
          },
          ellipsis: true
        },
        {
          title: 'ETA',
          align: 'center',
          width: 230,
          dataIndex: 'eta',
          scopedSlots: { customRender: 'eta' },
          ellipsis: true
          // customRender: function(text,record) {
          //   return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
          // }
        },
        {
          title: '目的港提货时间',
          align: 'center',
          width: 200,
          dataIndex: 'podDeliveryTime',
          scopedSlots: { customRender: 'tihuo' },
          ellipsis: true
        },
        {
          title: '目的港堆场信息',
          align: 'center',
          width: 230,
          dataIndex: 'podYardInfo_dictText',
          ellipsis: true
        },
        {
          title: '目的港还空箱时间',
          align: 'center',
          width: 230,
          dataIndex: 'podReturnboxTime',
          ellipsis: true
        },
        {
          title: '目的港离场时间',
          align: 'center',
          width: 230,
          dataIndex: 'podLeaveTime',
          customRender: function(text) {
            return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
          },
          ellipsis: true
        },
        {
          title: '目的港堆存天数',
          align: 'center',
          width: 150,
          dataIndex: 'podStackingDays',
          ellipsis: true
        },
        {
          title: '目的港堆场总费用',
          align: 'center',
          width: 150,
          dataIndex: 'podYardTotalCostDesc',
          customRender: function(text, r) {
            if (text || r.podYardTotalCostDescCurrency) {
              if (text) {
                return r.podYardTotalCostDescCurrency ? r.podYardTotalCostDescCurrency + text : text
              } else {
                return r.podYardTotalCostDescCurrency ? r.podYardTotalCostDescCurrency + '0.00' : '0.00'
              }
            } else {
              if (r.podYardTotalCost) {
                return r.podYardTotalCostCurrency ? r.podYardTotalCostCurrency + r.podYardTotalCost : r.podYardTotalCost
              } else {
                return r.podYardTotalCostCurrency ? r.podYardTotalCostCurrency + '0.00' : '0.00'
              }
            }
          },
          ellipsis: true
        },
        {
          title: '买箱费',
          align: 'center',
          width: 160,
          dataIndex: 'buyBoxCost',
          customRender: (text, record) => {
            if (text) {
              return record.buyBoxCostCurrency ? record.buyBoxCostCurrency + text : text
            } else {
              return record.buyBoxCostCurrency ? record.buyBoxCostCurrency + '0.00' : '0.00'
            }
          },
          ellipsis: true
        },
        {
          title: '用箱费',
          align: 'center',
          width: 160,
          dataIndex: 'useBoxCost',
          customRender: (text, record) => {
            if (text) {
              return record.useBoxCostCurrency ? record.useBoxCostCurrency + text : text
            } else {
              return record.useBoxCostCurrency ? record.useBoxCostCurrency + '0.00' : '0.00'
            }
          },
          ellipsis: true
        },
        {
          title: '意向卖箱费',
          align: 'center',
          width: 160,
          dataIndex: 'intentionToSellBoxFeel',
          customRender: (text, record) => {
            if (text) {
              return record.intentionToSellBoxFeelCurrency ? record.intentionToSellBoxFeelCurrency + text : text
            } else {
              return record.intentionToSellBoxFeelCurrency ? record.intentionToSellBoxFeelCurrency + '0.00' : '0.00'
            }
          },
          ellipsis: true
        },
        {
          title: '卖箱费',
          align: 'center',
          width: 160,
          dataIndex: 'saleBoxCost',
          customRender: (text, record) => {
            if (text) {
              return record.saleBoxCostCurrency ? record.saleBoxCostCurrency + text : text
            } else {
              return record.saleBoxCostCurrency ? record.saleBoxCostCurrency + '0.00' : '0.00'
            }
          },
          ellipsis: true
        },
        // {
        //   title: 'POD堆场总费用 ',
        //   align: 'center',
        //   width: 160,
        //   dataIndex: 'podYardTotalCost'
        // },
        {
          title: '利润额 ',
          align: 'center',
          width: 160,
          dataIndex: 'profitDesc',
          customRender: function(text, r) {
            if (text || r.profitDescCurrency) {
              if (text) {
                return r.profitDescCurrency ? r.profitDescCurrency + text : text
              } else {
                return r.profitDescCurrency ? r.profitDescCurrency + '0.00' : '0.00'
              }
            } else {
              if (r.profit) {
                return r.profitCurrency ? r.profitCurrency + r.profit : r.profit
              } else {
                return r.profitCurrency ? r.profitCurrency + '0.00' : '0.00'
              }
            }
          },
          ellipsis: true
        },
        // {
        //   title: '订单开始时间',
        //   align: 'center',
        //   width: 230,
        //   dataIndex: 'orderStartTime',
        //   customRender: function(text) {
        //     return !text ? '' : (text.length > 10 ? text.substr(0, 10) : text)
        //   }
        // },
        {
          title: '备注 ',
          align: 'center',
          width: 200,
          dataIndex: 'remark',
          ellipsis: true
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          width: 130,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/box.trade/jzxTrade/list',
        delete: '/box.trade/jzxTrade/delete',
        deleteBatch: '/box.trade/jzxTrade/deleteBatch',
        exportXlsUrl: '/box.trade/jzxTrade/exportXls',
        importExcelUrl: '/box.trade/jzxTrade/importExcel'

      },
      dictOptions: {},
      tableHeight: 450,
      companyData: [],
      layerPopData: {}
    }
  },
  created() {
    window.onresize = () => {
      console.log(document.documentElement.clientHeight)
      return (() => {
        this.tableHeight = document.documentElement.clientHeight - 350
      })()
    }
    this.initDictConfig()
    this.initColumns()
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      this.loadDataNoLoading()
    }, 5000)
  },
  destroyed() {
    clearInterval(this.timer)
  },
  methods: {
    refreshData(value, option) {
      console.log(value)
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.loadDataNoLoading()
      }, value)
    },
    handleMenuClick({ key }) {
      if (key == 1) {
        this.tradeType = '1'
        this.handleAdd('1')
      } else if (key == 3) {
        this.tradeType = '3'
        this.handleAdd('3')
      } else if (key == 2) {
        this.tradeType = '2'
        this.handleAdd('2')
      }
    },
    handleAdd: function(type) {
      let windowName = '国际箱贸'
      // if (type == '1') {
      //   this.$refs.modalForm.title = '国际箱贸业务'
      // } else if (type == '3') {
      //   this.$refs.modalForm.title = '租箱业务'
      // } else if (type == '2') {
      //   this.$refs.modalForm.title = '国内箱贸业务'
      // }
      if (type == '3') {
        windowName = '租箱箱贸'
      } else if (type == '2') {
        windowName = '国内箱贸'
      }
      let that = this
      this.$layer.open({
        title: windowName + '-新增',
        type: 2,
        area: ['1200px', '600px'],
        maxmin: true,
        shade: 0,
        resize: true,
        shadeClose: false,
        anim: 1,
        content: {
          content: JzxTradeModalWindow,
          parent: this
        },
        cancel: function(i, layero) {
          that.loadData()
        }
      })
      // this.$refs.modalForm.add()
      // this.$refs.modalForm.disableSubmit = false
    },
    copy(record) {
      let url = '/box.trade/jzxTrade/copy', method = 'post'
      let value = 'id=' + record.id
      httpAction(url, value, method).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadData()
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
        this.loadData()
      })
    },
    handleEdit: function(record) {

      let windowName = '国际箱贸-'
      if (record.type == '3') {
        this.tradeType = '3'
        windowName = '租箱箱贸-'
      } else if (record.type == '2') {
        this.tradeType = '2'
        windowName = '国内箱贸-'
      }
      if (this.layerPopData[record.id]) {
        this.$message.warn('窗口已打开')
      } else {
        let that = this
        let index = this.$layer.open({
          id: record.id,
          title: windowName + '：' + record.containerNumber,
          type: 2,
          area: ['1200px', '600px'],
          maxmin: true,
          shade: 0,
          resize: true,
          shadeClose: false,
          anim: 0,
          content: {
            content: JzxTradeModalWindow,
            parent: this,
            data: { editData: record, editType: true }
          },
          cancel: function(i, layero) {
            delete that.layerPopData[record.id]
            that.loadData()
          }
        })
        this.layerPopData[record.id] = index
      }
      // if (record.type == '1') {
      //   this.tradeType = '1'
      //   this.$refs.modalForm.title = '国际箱贸业务'
      // } else if (record.type == '3') {
      //   this.tradeType = '3'
      //   this.$refs.modalForm.title = '租箱业务'
      // } else if (record.type == '2') {
      //   this.tradeType = '2'
      //   this.$refs.modalForm.title = '国内箱贸业务'
      // }
      // this.$refs.modalForm.edit(record)
      // this.$refs.modalForm.disableSubmit = false
    },
    // handleDetail: function(record) {
    //   if (record.type == '1') {
    //     this.tradeType = '1'
    //     this.$refs.modalForm.title = '国际箱贸业务'
    //   } else if (record.type == '3') {
    //     this.tradeType = '3'
    //     this.$refs.modalForm.title = '租箱业务'
    //   } else if (record.type == '2') {
    //     this.tradeType = '2'
    //     this.$refs.modalForm.title = '国内箱贸业务'
    //   }
    //   this.$refs.modalForm.edit(record)
    //   this.$refs.modalForm.disableSubmit = true
    // },
    initDictConfig() {
      let a = Vue.ls.get('Login_Userinfo')
      // ajaxGetDictItems('customer_info,title,id,sys_org_code=\'' + a.orgCode + '\'', null).then((res) => {
      //   if (res.success) {
      //     console.log(res.result)
      //     this.fieldList[0].options = res.result
      //   }
      // })
      let param = { isLock: 0, pageSize: 99999 }
      getAction('/companydata/list', param).then(res => {
        console.log(res.result.records)
        let companyDataList = []
        for (let i = 0; i < res.result.records.length; i++) {
          companyDataList.push({
            value: res.result.records[i].companyName,
            text: res.result.records[i].companyName
          })
        }
        this.companyData = companyDataList
      })
      ajaxGetDictItems('yard_info,yard_info_col,id,sys_org_code=\'' + a.orgCode + '\'', null).then((res) => {
        if (res.success) {
          this.yardInfoOptions = res.result
        }
      })
    },
    begin(record) {
      let url = '/box.trade/jzxTrade/begin', method = 'post'
      let value = 'id=' + record.id
      httpAction(url, value, method).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.loadData()
        } else {
          this.$message.warning(res.message)
        }
      }).finally(() => {
      })
    },
    showConfirm(record) {
      let that = this
      this.$confirm({
        title: '是否要归还此集装箱?',
        cancelText: '取消',
        okText: '确定',
        onOk() {
          let url = '/box.trade/jzxTrade/complete', method = 'post'
          let value = 'id=' + record.id
          httpAction(url, value, method).then((res) => {
            if (res.success) {
              that.$message.success(res.message)
              that.loadData()
            } else {
              that.$message.warning(res.message)
            }
          })
        },
        onCancel() {
          console.log('Cancel')
        }
      })
    },
    returnBox(record) {
      console.log(record)
      this.showConfirm(record)
      // if (record.type == 2) {
      //   this.showConfirm(record)
      // } else {
      //   this.returnBoxData = record
      //   this.returnModalVisible = true
      // }
    },
    // returnModalAddHandleOk() {
    //   this.$refs.returnBoxForm.handleOk()
    // },
    // returnModalAddHandleCancel() {
    //   this.returnModalVisible = false
    // },
    // returnBoxCallback(f) {
    //   if (f) {
    //     this.loadData()
    //     this.returnModalVisible = false
    //   }
    // },
    //高级查询方法
    handleSuperQuery(arg) {
      if (!arg) {
        this.superQueryParams = ''
        this.superQueryFlag = false
      } else {
        this.superQueryFlag = true
        this.superQueryParams = JSON.stringify(arg)
      }
      this.loadData()
    },
    // 获取查询条件
    getQueryParams() {
      let sqp = {}
      if (this.superQueryParams) {
        sqp['superQueryParams'] = encodeURI(this.superQueryParams)
      }
      var param = Object.assign(sqp, this.queryParam, this.isorter)
      param.field = this.getQueryField()
      param.pageNo = this.ipagination.current
      param.pageSize = this.ipagination.pageSize
      return this.filterObj(param)
    },
    filterObj(obj) {
      if (!(typeof obj == 'object')) {
        return
      }

      for (let key in obj) {
        if (obj.hasOwnProperty(key)
          && (obj[key] == null || obj[key] == undefined || obj[key] === '')) {
          delete obj[key]
        }
      }
      return obj
    },
    //列设置更改事件
    onColSettingsChange(checkedValues) {
      var key = this.$route.name + ':colsettings'
      Vue.ls.set(key, checkedValues, 7 * 24 * 60 * 60 * 1000)
      this.settingColumns = checkedValues
      const cols = this.defColumns.filter(item => {
        if (item.key == 'rowIndex' || item.dataIndex == 'action') {
          return true
        }
        if (this.settingColumns.includes(item.dataIndex)) {
          return true
        }
        return false
      })
      this.columns = cols
    },
    initColumns() {
      //权限过滤（列权限控制时打开，修改第二个参数为授权码前缀）
      //this.defColumns = colAuthFilter(this.defColumns,'testdemo:');

      var key = this.$route.name + ':colsettings'
      let colSettings = Vue.ls.get(key)
      if (colSettings == null || colSettings == undefined) {
        let allSettingColumns = []
        this.defColumns.forEach(function(item, i, array) {
          allSettingColumns.push(item.dataIndex)
        })
        this.settingColumns = allSettingColumns
        this.columns = this.defColumns
      } else {
        this.settingColumns = colSettings
        const cols = this.defColumns.filter(item => {
          if (item.key == 'rowIndex' || item.dataIndex == 'action') {
            return true
          }
          if (colSettings.includes(item.dataIndex)) {
            return true
          }
          return false
        })
        this.columns = cols
      }
    },
    portHandleSearch(value) {
      let params = { name: value }
      getAction('/box/dictPort/findbyname', params).then(res => {
        if (res.code == 200) {
          let data = []
          res.result.forEach(item => {
            data.push(item.enName)
          })
          this.portData = data
        }
      })
    },
    //堆场费率下拉筛选
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      )
    },
    //显示隐藏操作列
    showHiddenActionCol() {
      if (this.actionLabel == '隐藏操作列') {
        this.columns.splice(this.columns.length - 1, 1)
        this.actionLabel = '显示操作列'
      } else {
        this.columns.push(this.actionColumn)
        this.actionLabel = '隐藏操作列'
      }
    },
    DateDiff(sDate1, sDate2) {    //sDate1和sDate2是2002-12-18格式
      let aDate, oDate1, oDate2, iDays
      if (sDate1 != null && sDate2 != null) {
        aDate = sDate1.split('-')
        oDate1 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])    //转换为12-18-2002格式
        aDate = sDate2.split('-')
        oDate2 = new Date(aDate[1] + '-' + aDate[2] + '-' + aDate[0])
        iDays = parseInt((oDate1 - oDate2) / 1000 / 60 / 60 / 24)    //把相差的毫秒数转换为天数
        return iDays
      } else {
        return -1
      }
    },
    showBadgeModal(val) {
      // this.badgeModalVisible = true
      Modal.confirm({
        title: '提示',
        content: val,
        onOk() {
          return new Promise((resolve, reject) => {
            setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
          }).catch(() => console.log('Oops errors!'))
        }
        // eslint-disable-next-line @typescript-eslint/no-empty-function
        // onCancel() {},
      })
    },
    //获取当前日期，与业务时间计算出日期差
    getNowFormatDate(t) {
      let date = new Date()
      let seperator1 = '-'
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let strDate = date.getDate()
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      if (strDate >= 0 && strDate <= 9) {
        strDate = '0' + strDate
      }
      let currentdate = year + seperator1 + month + seperator1 + strDate
      return this.DateDiff(currentdate, t)
    },
    calcTips(id, text) {
      let params = { id: id, deliveryTime: text }
      getAction('/box.trade/jzxTrade/gettipsday', params).then(res => {
        console.log(res)
      })
    },
    allclose() {
      this.loadData(1)
    },
    //双击显示编辑页面
    handleShowEdit(record, index) {
      return {
        on: {
          dblclick: () => {
            this.handleEdit(record)
            // console.log(record,index)
          }
        }
      }
    }
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';

/deep/ .ant-row .ant-form-item {
  margin-bottom: 5px;
}
</style>
<style lang="less">
.resize-table-th {
  position: relative;

  .table-draggable-handle {
    transform: none !important;
    position: absolute;
    height: 100% !important;
    bottom: 0;
    left: auto !important;
    right: -5px;
    cursor: col-resize;
    touch-action: none;
  }
}

.ant-badge-dot {
  width: 10px;
  height: 10px;
}
</style>